<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>后台管理系统</title>
	<meta name="keywords" content="admin,layui,layui模板,layui后台,后台模板,admin,admin模板,layui mini">
	<meta name="description" content="admin基于layui的轻量级前端后台管理框架，最简洁、易用的后台框架模板，面向所有层次的前后端程序,只需提供一个接口就直接初始化整个框架，无需复杂操作。">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta name="referrer" content="never">
	<link rel="icon" href="assets/images/favicon.ico">
	<link rel="stylesheet" href="assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="assets/css/admin.min.css" media="all">
	<link rel="stylesheet" href="assets/css/public.css" media="all">
</head>

<body class="admin-all">
	<div class="admin-header">
		<a class="admin-logo"></a>
		<div class="admin-header-content">
			<div class="admin-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div>
			<!--电脑端头部菜单-->
			<ul class="layui-nav header-menu-pc" lay-filter="header-menu-pc"></ul>
			<!--手机端头部菜单-->
			<ul class="layui-nav header-menu-mobile">
				<li class="layui-nav-item">
					<a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>
					<dl class="layui-nav-child">
					</dl>
				</li>
			</ul>
			<!--头部右侧-->
			<ul class="layui-nav header-right">
				<li class="layui-nav-item" title="刷新" lay-unselect>
					<a href="javascript:;" data-refresh="刷新"><i class="fa fa-refresh"></i></a>
				</li>
				<li class="layui-nav-item" title="清除缓存" lay-unselect>
					<a href="javascript:;" data-clear="清理" class="admin-clear"><i class="fa fa-trash-o"></i></a>
				</li>
				<li class="layui-nav-item admin-admin">
					<a href="javascript:;">
						<img class="admin-avatar" src="" onerror="this.src='assets/images/logo.png'" />
						<span class="admin-name">admin</span>
						<span class="layui-nav-more"></span>
					</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="javascript:;" class="admin-info">基本资料<span class="layui-badge-dot"></span></a>
						</dd>
						<dd>
							<a href="javascript:;" class="admin-pass">修改密码</a>
						</dd>
						<dd>
							<hr>
						</dd>
						<dd>
							<a href="javascript:;" class="login-out">退出登录</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item admin-select-bgcolor" lay-unselect>
					<a href="javascript:;" data-bgcolor="配色方案"><i class="fa fa-ellipsis-v"></i></a>
				</li>
			</ul>
		</div>
	</div>
	<!--初始化加载层-->
	<div class="admin-loader">
		<canvas id="loader" width="300" height="300" style="width: 300px; height: 300px; border-radius: 20px;"></canvas>
		<!-- <div class="admin-loader-inner"></div> -->
	</div>
	<!--手机端遮罩层-->
	<div class="admin-make"></div>
	<!-- 移动导航 -->
	<div class="admin-site-mobile"><i class="layui-icon layui-icon-right"></i></div>
	<!--无限极左侧菜单-->
	<div class="admin-side"></div>
	<!-- 主体内容 -->
	<div class="admin-body">
		<div class="admin-tab layui-tab" lay-filter="adminTab" lay-allowclose="true">
			<ul class="layui-tab-title">
				<li class="layui-this" id="adminHomeTabId" lay-id=""></li>
			</ul>
			<div class="admin-tab-control">
				<i class="layui-icon layui-icon-left admin-tab-roll-left"></i>
				<i class="layui-icon layui-icon-right admin-tab-roll-right"></i>
				<ul class="layui-nav">
					<li class="layui-nav-item">
						<i class="layui-icon layui-icon-down"></i>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;" admin-tab-close="current">关 闭 当 前</a></dd>
							<dd><a href="javascript:;" admin-tab-close="other">关 闭 其 他</a></dd>
							<dd><a href="javascript:;" admin-tab-close="all">关 闭 全 部</a></dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="layui-tab-content">
				<div id="adminHomeTabIframe" class="layui-tab-item layui-show"></div>
			</div>
		</div>
	</div>
	<!-- 基本资料 -->
	<form class="layui-form" id="admin-info" lay-filter="admin-info" style="display: none">
		<input type="number" name="id" lay-verify="int" autocomplete="off" class="layui-input layui-hide">
		<div class="layui-form-item">
			<label class="layui-form-label required">账号</label>
			<div class="layui-input-block">
				<input type="text" name="user" lay-verify="required" maxlength="30" lay-reqtext="账号是必填项，不能为空！" autocomplete="off" placeholder="请输入账号" class="layui-input" disabled>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="name" lay-verify="zh" maxlength="4" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="1" title="男" checked>
				<input type="radio" name="sex" value="0" title="女">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">生日</label>
			<div class="layui-input-block">
				<input type="text" name="birthday" lay-verify="date" autocomplete="off" class="layui-input" readonly>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" maxlength="11" lay-verify="mobile" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" maxlength="50" lay-verify="email2" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">头像</label>
			<div class="layui-input-block">
				<input type="text" name="avatar" maxlength="255" autocomplete="off" class="layui-input layui-hide">
				<div class="layui-upload-drag" id="avatar-upload">
					<i class="layui-icon layui-icon-upload"></i>
					<img src="" alt="头像" width="50px" height="50px" class="layui-hide" enlarge="5">
					<p>点击上传，或将文件拖拽到此处</p>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit lay-filter="admin-info-submit">保存</button>
			</div>
		</div>
	</form>
	<!-- 修改密码 -->
	<form class="layui-form" id="admin-pass" lay-filter="admin-pass" style="display: none">
		<div class="layui-form-item">
			<label class="layui-form-label required">原密码</label>
			<div class="layui-input-block">
				<input type="password" name="pass0" lay-verify="required" maxlength="30" lay-reqtext="原密码是必填项，不能为空！" autocomplete="off" placeholder="请输入原密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required">新密码</label>
			<div class="layui-input-block">
				<input type="password" name="pass1" lay-verify="required" maxlength="30" lay-reqtext="新密码是必填项，不能为空！" autocomplete="off" placeholder="请输入新密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label required">确认密码</label>
			<div class="layui-input-block">
				<input type="password" name="pass2" lay-verify="required" maxlength="30" lay-reqtext="确认密码是必填项，不能为空！" autocomplete="off" placeholder="请确认新密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit lay-filter="admin-pass-submit">保存</button>
			</div>
		</div>
	</form>
	<script src="assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="assets/js/lay-config.js" charset="utf-8"></script>
	<script src="assets/js/transmit.js" charset="utf-8"></script>
	<script src="assets/js/loader.min.js" charset="utf-8"></script>
	<script src="assets/js/public.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		loader.init('loader');
	
		if (window.frameElement) top.location = './';

		layui.use(['jquery', 'layer', 'form', 'laydate', 'upload', 'mAdmin', 'mTongji'], function() {
			var $ = layui.jquery,
				form = layui.form,
				laydate = layui.laydate,
				upload = layui.upload,
				mTongji = layui.mTongji,
				mAdmin = layui.mAdmin,
				layer = layui.layer;

			mAdmin.render({
				initUrl: lianyi.api('init'), // 初始化接口
				urlHashLocation: true, // 是否打开hash定位
				skin: false, // 主题皮肤默认配置
				multiModule: true, // 是否开启多模块
				menuChildOpen: false, // 是否默认展开菜单
				loadingTime: 0, // 初始化加载时间
				pageAnim: true, // iframe窗口动画
				maxTabNum: 20, // 最大的tab打开数量
			});

			laydate.render({
				elem: $('#admin-info input[name="birthday"]')[0],
				type: 'date',
				trigger: 'click'
			});

			var loading;
			var uploadIns = upload.render({
				elem: '#avatar-upload',
				url: lianyi.api({ m: 'imgUpload' }),
				accept: 'images', // 指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
				acceptMime: 'images', // 规定打开文件选择框时，筛选出的文件类型
				exts: 'gif|jpg|jpeg|png',
				size: 1024 * 10,
				before: function(obj) {
					loading = lianyi.load('上传中...');
				},
				done: function(res) {
					var code = res.code,
						msg = res.msg;

					if (res.code === 0)
						lianyi.success(msg, function() {
							$('#avatar-upload > .layui-icon-upload').addClass('layui-hide');
							$('#avatar-upload > img').removeClass('layui-hide').attr('src', res.imgUrl);
							form.val('admin-info', { avatar: res.imgUrl });
						});
					else
						lianyi.fail(msg, function() {
							lianyi.jump(res);
						});
				},
				error: function(index, upload) {
					layer.close(loading);
					lianyi.fail('上传出错');
				}
			});

			// 基本资料
			$('.admin-admin').on('click', '.admin-info', function(event) {
				layer.open({
					title: '基本资料',
					shadeClose: true,
					maxmin: true,
					type: 1,
					content: $('#admin-info'),
					area: ['auto', '380px'],
					success: function(elem) {
						if (admin.avatar) {
							$('#avatar-upload > .layui-icon-upload').addClass('layui-hide');
							$('#avatar-upload > img').removeClass('layui-hide').attr('src', admin.avatar);
						} else {
							$('#avatar-upload > .layui-icon-upload').removeClass('layui-hide');
							$('#avatar-upload > img').addClass('layui-hide').attr('src', '');
						}
						form.val('admin-info', admin);
					}
				});
			});

			// 修改密码
			$('.admin-admin').on('click', '.admin-pass', function(event) {
				var layId = 'admin-pass-' + new Date().getTime();
				layer.open({
					title: '修改密码',
					shadeClose: true,
					maxmin: true,
					type: 1,
					content: $('#admin-pass'),
					success: function(elem) {
						form.val('admin-pass', {
							pass0: '',
							pass1: '',
							pass2: ''
						});
					}
				});
			});

			// 退出登录
			$('.admin-admin').on('click', '.login-out', function(event) {
				lianyi.request({
					url: lianyi.api('logout'),
					msg: '正在退出...',
					success: function(res) {
						localStorage.removeItem('admin');
					}
				});
			});

			$('#admin-pass input[type="password"]').on('input propertychange', function() {
				var val = $(this).val();
				if (/[^a-zA-Z0-9\_\,\.\:\;]/.test(val))
					$(this).val(val.replace(/[^a-zA-Z0-9\_\,\.\:\;]/, ''));
			});

			form.on('submit(admin-info-submit)', function(data) {
				var field = data.field;
				if (field.hasOwnProperty('file')) delete field.file;

				if (false === (field = updateParams(field, admin))) {
					lianyi.fail('无变化！');
					return false;
				}

				lianyi.request({
					url: lianyi.api('update'),
					data: field,
					msg: '正在保存...',
					success: function(res) {
						layer.closeAll();
						admin = $.extend(admin, field);
						if (admin.avatar) $('.admin-admin > a > img').attr('src', admin.avatar);
						$('.admin-admin > a > .admin-name').text(admin.name || admin.user);
					}
				});

				return false;
			});

			form.on('submit(admin-pass-submit)', function(data) {
				var field = data.field;

				if (field.pass0 === field.pass1) {
					lianyi.fail('新密码与旧密码不能相同！');
					return false;
				} else if (field.pass1 !== field.pass2) {
					lianyi.fail('两次新密码不一致！');
					return false;
				}
				delete field.pass2;

				$('#admin-pass input[type="password"]').prop('disabled', true); // 防止浏览器记住密码
				lianyi.request({
					url: lianyi.api('update_pass'),
					data: field,
					msg: '正在修改...',
					success: function() {
						localStorage.removeItem('pass');
					},
					complete: function() {
						$('#admin-pass input[type="password"]').prop('disabled', false);
					}
				});

				return false;
			});

			// 百度统计代码，只统计指定域名
			mTongji.render({
				specific: true,
				domains: [
					'99php.cn',
					'admin.99php.cn',
					'admin-onepage.99php.cn',
				],
			});
		});
	</script>
</body>

</html>